<template>
  <div class="homeBox">
    <h2 class="workTitle marginBtm">站内通告</h2>
    <a-table
      size="middle"
      :columns="fileColumns"
      :data-source="fileData"
      :rowkey="(record) => record.id"
      :pagination="{
        hideOnSinglePage: true,
        pageSize: 10,
        change: (page) => getFileData({ pageNo: page }),
        ...filePagination,
      }"
    >
      <span slot="urgentLevel" slot-scope="text, record" :class="{ red: text === '3' }">
        {{ record.urgentLevel_dictText }}
      </span>
      <span slot="annexUrl_down" slot-scope="text, record">
        <a v-show="text" @click="handleAnnexDown(record)" :style="{ margin: '0 5px' }">下载附件</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { queryNoticeList } from '@/api/api'

const fileColumns = [
  {
    title: '序号',
    dataIndex: 'sort',
    ellipsis: true,
  },
  {
    title: '文件名称',
    dataIndex: 'fileName',
    ellipsis: true,
  },
  {
    title: '文件说明',
    dataIndex: 'fileDesc',
    ellipsis: true,
  },
  {
    title: '发布日期',
    dataIndex: 'releaseDate',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '类型',
    dataIndex: 'noticeType_dictText',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '紧急程度',
    dataIndex: 'urgentLevel',
    align: 'center',
    scopedSlots: { customRender: 'urgentLevel' },
  },
  {
    title: '附件',
    dataIndex: 'annexUrl',
    ellipsis: true,
    scopedSlots: { customRender: 'annexUrl_down' },
  },
]
export default {
  name: 'Notice',
  data() {
    return {
      fileColumns,
      fileData: [],
      filePagination: {},
    }
  },
  created() {
    this.getFileData({ pageNo: 1 })
  },
  methods: {
    // 通告
    getFileData(page) {
      queryNoticeList({ pageSize: 10, ...page }).then((res) => {
        if (res.code === 200) {
          this.fileData = res.result.records || []
          this.filePagination = {
            current: res.result.pages,
            total: res.result.total,
          }
        } else {
          this.fileData = []
          this.filePagination = {
            current: 1,
            total: 0,
          }
          this.$message.warning(res.message)
        }
      })
    },
    handleAnnexDown(record) {
      //附件下载
      var id = record.id;
      let downFileUrl = "llbbStationNotice/llbbStationNotice/downFile";
      this.$axios({
        method: 'get',
        url: `${window._CONFIG['domianURL']}/${downFileUrl}?id=` + id,
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'X-Access-Token': Vue.ls.get(ACCESS_TOKEN),
        },
      }).then(function (response) {
          //下载
          var reader = new FileReader()
          reader.onload = (e) => {
            console.log('开始下载')
            //下载
            let data = response.data
            if (!data) {
              return
            }
            var blob = new Blob([data], {
              type: 'text/plain;charset=UTF-8',
            })
            var url = window.URL.createObjectURL(blob)
            var aLink = document.createElement('a')
            aLink.style.display = 'none'
            aLink.href = url
            aLink.setAttribute('download', record.annexName)
            document.body.appendChild(aLink)
            aLink.click()
            //下载完成移除元素
            document.body.removeChild(aLink)
            //释放掉blob对象
            window.URL.revokeObjectURL(url)
          }
          reader.readAsText(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
  },
}
</script>

<style scoped lang="less">
@import url('./style.less');
.homeBox {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  .hover();
}
.workTitle {
  font-size: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
  font-weight: 700;
}
.marginBtm {
  margin-bottom: 25px;
}
</style>